<template>
  <div class="custom-table-list-wrapper">
    <div class="search search1" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="报警等级">
            <el-select
              class="search-select"
              v-model="searchParams.level"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of dict['warning_level']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="报警类型">
            <el-select
              class="search-select"
              v-model="searchParams.type"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of dict['warning_type']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select
              class="search-select"
              v-model="searchParams.status"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of dict['process_status']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备场景">
            <el-select
              class="search-select"
              v-model="searchParams.sceneId"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of dict['scene_type']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属园区">
            <el-select
              class="search-select"
              v-model="searchParams.parkId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item of parkList"
                :key="item.pkid"
                :label="item.name"
                :value="item.pkid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keywords"
              placeholder="请输入报警名称、设备位置"
              :suffix-icon="Search"
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList(1)"
          ><svg-icon name="search" size="14px" />搜索</el-button
        >
        <el-button @click="handleReset(null, ['type'])"
          ><svg-icon name="reset" size="17px" />重置</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-operate">
        <el-button type="primary" @click="handleBatchProcessing"
          ><svg-icon name="warning-process" size="15px" />报警处理</el-button
        >
      </div>
      <div class="content-table">
        <el-table
          class="custom-table"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="60px" />
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="address" label="设备位置" />
          <el-table-column prop="level" label="报警等级" />
          <el-table-column prop="type" label="报警类型" />
          <el-table-column prop="startTime" label="报警开始时间" />
          <el-table-column prop="endTime" label="报警结束时间" />
          <el-table-column prop="warning" label="处理状态">
            <template #default="scope">
              <el-tag
                :type="getDictStyle('warning_process_status', scope.row.status)"
                >{{
                  getDictValue('warning_process_status', scope.row.status)
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                v-if="scope.row.status === 0"
                link
                type="primary"
                @click="handleProcessing(scope.row)"
                >处理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
    <DetailDialog
      ref="detailRef"
      :detail="currentDetail"
      @close="handleClose"
    />
    <ProcessingDialog
      ref="processingDialog"
      :detail="currentDetail"
      @close="handleClose"
    />
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'

import { useDict } from '@/hooks/useDict'
import { useTableList } from '@/hooks/useTableList'
import DetailDialog from './components/alarmDetail.vue'
import ProcessingDialog from './components/alarmProcessing.vue'

const props = defineProps({
  currentType: {
    type: String,
  },
  parkList: {
    type: Array,
    default: [],
  },
})

const { dict, getDictValue, getDictStyle } = useDict([
  'scene_type',
  'warning_process_status',
  'warning_level',
  'warning_type',
])

const searchParams = ref({
  level: '',
  type: '',
  status: '',
  scene: '',
  deviceType: '',
  keywords: '',
})

const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams)

const multipleSelection = ref([])

const processingDialog = ref()

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const handleProcessing = (row) => {
  processingDialog.value.dialogVisible = true
  currentDetail.value = { ...row }
}

const handleBatchProcessing = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请勾选处理的报警')
    return
  }
  processingDialog.value.dialogVisible = true
  currentDetail.value = [...multipleSelection.value]
}

watch(
  () => props.currentType,
  () => {
    initTableList(1)
  },
  {
    immediate: true,
  },
)

watch(
  () => props.parkId,
  (newVal) => {
    searchParams.value.parkId = newVal
    initTableList(1)
  },
  {
    immediate: true,
  },
)
</script>
